{% extends "base.html" %}



{% block title %}
<title>注册</title>
{% endblock %}

{% block css %}
<style>
.boxx{
    position: relative;
}
.check_username_no{
    position: absolute;
    width: 48px;
    height: 48px;
    background-image: url("/static/img/存在.png");

    right: 10px;
    top: 20px;
}
.check_username_ok{
    position: absolute;
    width: 48px;
    height: 48px;
    background-image: url("/static/img/可使用.png");
    background-size: contain;
    background-repeat: no-repeat;
    right: 10px;
    top: 32px;
}
.eyes_open{
     position: absolute;
     width: 48px;
     height: 48px;
     background-image: url("/static/img/睁眼.png");
     right: 6px;
     top: 17px;
}
.eyes_close{
     position: absolute;
     width: 48px;
     height: 48px;
     background-image: url("/static/img/闭眼.png");
    background-size: contain;
    background-repeat: no-repeat;
     right: 6px;
     top: 27px;
}

</style>
{% endblock %}

{% block body %}
<h1>注册</h1>

<div class="row col-md-6 col-md-offset-3">

    <form action="" method="post">
      {% csrf_token %}
        <div class="form-group boxx">
            {{ forms.username.label_tag }}
            <span class="text-danger">*</span>
            {{ forms.username }}
            <div class="check_username"></div>
      </div>
          <div class="form-group boxx">
              {{ forms.password.label_tag }}
            <span class="text-danger">*</span>

                {{ forms.password }}
              <div class="eyes"></div>
          </div>
        <div class="form-group boxx">
              {{ forms.password2.label_tag }}
            <span class="text-danger">*</span>

                {{ forms.password2 }}
          </div>
       <div class="form-group">
           {{ forms.email.label_tag }}
                {{ forms.email }}
          </div>
        <div class="form-group">
            {{ forms.telephone.label_tag }}
                {{ forms.telephone }}
          </div>




      {% if request.method == "POST" %}
        {% for fields in forms %}
            {% for error in fields.errors %}
                {% if error %}
                <p class="text-danger"> {{ error }} </p>
                {% endif %}
            {% endfor %}
        {% endfor %}
      {% endif %}


      <button type="submit" class="btn btn-default">注册</button>
      <a class="btn btn-default" href="/user/login" role="button">已有账号？去登录</a>
      <a class="btn btn-default" href="{% url 'main:index' %}" role="button">返回首页</a>
    </form>

</div>

{% endblock %}

{% block js %}
<script>
    $(function (){
        $("#username").keyup(function (){
            let username = $(this).val()
            $.ajax({
                url:"/user/check_username/",
                method:"get",
                data:{
                    username:$(this).val()
                },
                success:function (data){
                    if(data.code==0){
                        $(".check_username").removeClass("check_username_ok")
                        $(".check_username").addClass("check_username_no")
                    }
                    if(data.code == 1){
                        $(".check_username").removeClass("check_username_no")
                         $(".check_username").addClass("check_username_ok")
                    }
                    if(username == ''){
                        $(".check_username").removeClass("check_username_no")
                         $(".check_username").removeClass("check_username_ok")
                    }

                }
            })
        })


         $("#password").keyup(function (){
             if ($("#password").val() == ''){
                $(".eyes").removeClass("eyes_open")
                $(".eyes").removeClass("eyes_close")
            }else {
                $(".eyes").addClass("eyes_close")
             }
         })

        $(".eyes").click(function (){
            if($(this).hasClass("eyes_close")){
                $(this).addClass("eyes_open")
                $(this).removeClass("eyes_close")
                $("#password").attr("type","text")
                $("#password2").attr("type","text")
            }
            else {
                $(this).addClass("eyes_close")
                $(this).removeClass("eyes_open")
                $("#password").attr("type","password")
                $("#password2").attr("type","password")
            }


        })






    })

</script>
{% endblock %}